<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
    .box-swiper{
    margin: 100px auto;
    width: 600px;
    height: 400px;
    }

    .swiper-slide img{
        width: 600px;
        height: 400px;
        background-size: auto; 
    }
    </style>
</head>
<body>
    <div class="box-swiper">
        <!-- 轮播 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/timg1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/timg2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/timg3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/timg4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/timg5.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <script src="./js/swiper.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        // swiper-js
    var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })

        //如果你在swiper初始化后才决定使用clickable，可以这样设置
        // mySwiper.params.pagination.clickable = true;
        // //此外还需要重新初始化pagination
        // mySwiper.pagination.destroy()
        // mySwiper.pagination.init()
        // mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
    
    </script>
</body>
</html>